<template>
    <view class="order-list">
        <!-- 订单列表循环 -->
        <view
            v-for="(item, index) in orders"
            :key="item.id || index"
            class="order-card order-item"
			@click="handleClick(item)"
        >
            <!-- 订单标题和信息 -->
            <view class="order-top">
                <view class="order-left">
					
                    <u-text class="order-title" :lines="2" >
						<u-tag size="mini" mode="plain" shape="circleLeft" :text="item.status.message" :type="statusType(item.status.code)" />
						<text style="margin: 0 15rpx; font-size: 32rpx;line-height: 54rpx;">{{ item.order_name }}</text>
					</u-text>
                    <view class="game-info">
                        <text class="game-info-text">
							<text style="color: #3C9CFF;">王者荣耀</text> /
							<text style="color: #3C9CFF;">{{ item.receiving_server }}</text> /
							<text style="color: #3C9CFF;">默认服</text>

						</text>
                
                    </view>
					<view class="order-details">
                        <text style="margin-right: 8rpx;">接单价格: </text> <u-text  type="primary" :text="item.receiving_price" class="detail-text"></u-text>
                        <text style="margin-right: 8rpx;">发单价格: </text> <u-text  type="primary" :text="item.posting_price" class="detail-text"></u-text>
                    </view>
                    <view class="order-details">
                        <text style="margin-right: 8rpx;">接单保证金: </text> <u-text  type="primary" :text="(parseFloat(item.receiving_margin || 0) + parseFloat(item.receiving_efficiency_fee || 0)).toFixed(2)" class="detail-text"></u-text>
                        <text style="margin-right: 8rpx;">发单保证金: </text> <u-text  type="primary" :text="(parseFloat(item.posting_security_fee || 0) + parseFloat(item.posting_efficiency_fee || 0)).toFixed(2)" class="detail-text"></u-text>
                    </view>
                        <u-text type="warning" class="detail-text">时限：{{ item.receiving_delivery_time }}</u-text>

                    <view class="special-tag" v-if="item.specialTag">
                        <view
                            class="rule-chip rule-chip-success"
                        >
                            {{ item.specialTag }}
                        </view>
                    </view>
                </view>
                <view class="order-right">
                    <text class="price">¥{{ parseFloat(item.receiving_price * 0.3).toFixed(2) }}</text>
                </view>
            </view>
        </view>
        <!-- 空订单提示 -->
        <view v-show="false" class="empty-state">
            <!-- <text class="empty-text">暂无订单</text> -->
			 <u-empty text="暂无订单" mode="list"></u-empty>
        </view>
    </view>

	<!-- 支付模态框 -->
	  	<u-popup width="500rpx" height="500rpx" closeable close-icon-size="60rpx" v-model="pay_modal_show" mode="center">
			<view class="pay-modal-content">
				<!-- 标题 -->
				<u-text size="32rpx" type="primary" :text="pay_modal_content" class="pay-modal-title"></u-text>
				
				<!-- 密码输入框 -->
				<view class="pay-password-container">
					<view 
						v-for="(input, index) in 6" 
						:key="index" 
						class="password-input"
						:class="{'password-filled': pay_value.length > index}">
						{{ pay_value.length > index ? '*' : '' }}
					</view>
					<input 
						v-model="pay_value" 
						type="number" 
						class="real-input"
						maxlength="6"
						autofocus
						@input="handlePasswordInput"
						placeholder="输入6位支付密码">
				</view>
				
				<!-- 按钮 -->
				<view class="pay-modal-buttons">
					<u-button 
						size="medium" 
						class="pay-btn cancel-btn"
						@click="handlePayCancel">
						取消
					</u-button>
					<u-button 
						size="medium" 
						type="primary"
						class="pay-btn confirm-btn"
						:disabled="pay_value.length !== 6"
						@click="handlePayConfirm">
						确定
					</u-button>
				</view>
			</view>
		</u-popup>
	 <u-action-sheet @click="action_handleClick" :tips="{'text':'请选择你的操作'}" :list="action_list" v-model="action_show"></u-action-sheet>
		 <u-loading-popup v-model="popup_loading_show" mode="flower" :text="popup_loading_text" />

	</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { cancelOrder, acceptOrder } from '@/static/apis/wzry'
import { readLocalStorage } from '@/static/js/hub'

const emit = defineEmits(['refreshOrders']);
const UserInfo = ref(readLocalStorage('userInfo'))
const pay_modal_show = ref(false)
const pay_modal_content = ref("请输入支付密码")
const pay_value = ref('')
const popup_loading_show = ref(false)
const popup_loading_text = ref("加载中...")

const action_show = ref(false);
const action_list = ref([
	{
		text: "接单"
	},
 	{
      text: '取消订单'
    },

	{
	text: "编辑订单"
	}
]);
// 定义组件属性
const props = defineProps({
    orders: {
        type: Array,
        default: () => []
    },
	StatusValue: {
        type: Number,
        default: 1
    }
})

// 设置当期的item
const currentItem = ref(null);

// 密码输入处理
const handlePasswordInput = (e) => {
	pay_value.value = e.detail.value;
	// 自动提交，如果输入了6位密码
	if (pay_value.value.length === 6) {
		// 延迟一下再提交，让用户看到最后一个密码输入
		setTimeout(() => {
			handlePayConfirm();
		}, 100);
	}
};

// 支付确认处理
const handlePayConfirm = () => {
	
	
	// 调用接单API
	acceptOrder({"OrderID": currentItem.value.order_source_id, PayPassword: pay_value.value}).then(res => {
		if (res.code === 0) {
			uni.showToast({
				title: '接单成功',
				icon: 'success',
				duration: 2000
			});
			// 重置密码输入
	pay_value.value = '';
	// 关闭模态框
	pay_modal_show.value = false;
			// 刷新订单列表
			emit('refreshOrders');
		} else {
			uni.showToast({
				title: res.message || '接单失败',
				icon: 'none',
				duration: 2000
			});
		}
	}).finally(() => {
		pay_value.value = '';
		pay_modal_show.value = false;
	});
};

// 支付取消处理
const handlePayCancel = () => {
	// 重置密码输入
	pay_value.value = '';
	// 关闭模态框
	pay_modal_show.value = false;
};

// 定义状态类型映射
const statusTypeMap = {
    1: 'primary',
    2: 'success',
    3: 'info',
    4: 'error',
    5: 'warning',
    6: 'error',
}

// 定义状态类型方法
const statusType = (code) => {
	
    return statusTypeMap[code] || 'primary'
}

// 子组件内部的点击处理函数
const handleClick = (item) => {
    console.log(UserInfo.value);
    
    if (UserInfo.value.role.code != 1) {
        // 触发自定义事件，并传递参数（可选）
        if (props.StatusValue !== 1 && props.StatusValue !== 2 && props.StatusValue !== 5) {
            uni.showToast({
                title: '完成单不支持操作',
                icon: 'none',
                duration: 2000
            });
                return;
            }
  
  }
  currentItem.value = item;
  action_show.value = true;
  
};

// 处理操作点击事件
const action_handleClick = (index) => {
  switch (index) {
	case 0:
        console.log(props.StatusValue);
        
		// 接单
		if(props.StatusValue !== 1) {
			uni.showToast({
				title: '接单状态错误',
				icon: 'none',
				duration: 2000
			});
			return;
		}
		pay_modal_show.value = true;
		break
	case 1:
		popup_loading_text.value = "取消订单中..."
		popup_loading_show.value = true;
		cancelOrder({OrderID: currentItem.value.posting_platform_id}).then(res => {
			if (res.code === 0) {
				uni.showToast({
					title: res.message,
					icon: 'none',
					duration: 2000
				});
				// 刷新订单列表,返回给父组件通知刷新
				emit('refreshOrders');
			} else {

				uni.showToast({
					title: res.message || '取消订单失败',
					icon: 'none',
					duration: 2000
				});
			}
		}).finally(() => {
			popup_loading_show.value = false;
		});
		break;
	
	case 2:
		uni.navigateTo({
			url: '/pages/edit_order/edit_order?orderID=' + encodeURIComponent(currentItem.value.order_id)
		});
		break;
  
	default:
		break;
  }
}

// 组件挂载后初始化
onMounted(() => {
    // 可以在这里获取订单数据
})

onShow(() => {
    // 页面显示时更新数据
})
</script>

<style scoped lang="scss">

.order-list {
    background-color: #fcfcfc;
	    padding: 12px;
    border-radius: 8px;
    font-size: 12px;
    color: #858585;
}

.order-item {
    margin-bottom: 0;
}

.order-card {
    border-radius: 8rpx;
    padding: 16rpx;
    box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.1);
    border-bottom: 1rpx solid #e4e5e6;
    background-color: #fff;
	margin-bottom: 20rpx;
}

.order-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.order-left {
    flex: 1;
}

.order-title {
    font-size: 28rpx;
    font-weight: 700;
    color: #323233;
    margin-bottom: 12rpx;
    line-height: 38rpx;
    display: block;
}

.game-info {
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;
	margin-top: 10rpx;
}

.game-info-text {
    font-size: 22rpx;
    color: #909399;
}

.order-details {
    display: flex;
    margin-bottom: 8rpx;
}

.detail-text {
    font-size: 20rpx;
    color: #969799;
    margin-right: 24rpx;
}

.special-tag {
    margin-bottom: 0;
}

.order-right {
    display: flex;
    align-items: flex-start;
    margin-top: 4rpx;
}

.price {
    font-size: 28rpx;
    font-weight: 600;
    color: #ff3333;
}

/* 自定义标签样式 */
.rule-chip {
    display: inline-block;
    padding: 2rpx 8rpx;
    border-radius: 2rpx;
    font-size: 20rpx;
    font-weight: 500;
    color: #ffffff;
}

/* 主要标签样式 */
.rule-chip-primary {
    background-color: #3c9cff;
}

/* 成功标签样式 */
.rule-chip-success {
    background-color: #67c23a;
}

/* 空状态样式 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 100rpx;
    color: #c0c4cc;
}

.empty-text {
    font-size: 24rpx;
    color: #909399;
}
/* 支付模态框样式 */
.pay-modal-content {
    padding: 40rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pay-modal-title {
    text-align: center;
    margin-bottom: 40rpx;
    margin-top: 20rpx;
}

.pay-password-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50rpx;
    position: relative;
}

.password-input {
    width: 80rpx;
    height: 80rpx;
    border: 2rpx solid #e5e5e5;
    border-radius: 8rpx;
    margin: 0 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40rpx;
    color: #333;
    background-color: #fff;
    transition: all 0.2s ease;
}

.password-input.password-filled {
    border-color: #2979ff;
    box-shadow: 0 0 10rpx rgba(41, 121, 255, 0.1);
}

.real-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    font-size: 20rpx;
}

.pay-modal-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
}

.pay-btn {
    width: 200rpx;
    height: 60rpx;
    font-size: 28rpx;
    font-weight: 500;
    border-radius: 8rpx;
}

.cancel-btn {
    border: 2rpx solid #e5e5e5;
    background-color: #fff;
    color: #666;
}

.confirm-btn {
    background-color: #2979ff;
    color: #fff;
}

.confirm-btn:disabled {
    background-color: #ccc;
    color: #fff;
}
</style>